<template>
    <div class="app-container">
        <el-form :show-message="!($route.query.isInfo || isInfo)" ref="elForm" :disabled="$route.query.isInfo || isInfo"
            :model="formData" :rules="rules" size="medium" label-width="150px">
            <h2 style="text-align: center">应急预案演练记录</h2>
            <h4 class="form-header h4">基本信息</h4>
            <el-row :gutter="15">
                <el-col :span="8" v-if="!$route.query.isEdit">
                    <el-form-item label="年度" prop="year">
                        <el-date-picker type="year" v-model="year" format="yyyy" value-format="yyyy" @change="changeYear"
                            :style="{ width: '100%' }" placeholder="请选择年度" clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="演练预案" prop="reservePlan">
                        <el-select :disabled="$route.query.isEdit" value-key="safeAccidentDrillItemId" v-model="reservePlan"
                            @change="changeReservePlan" placeholder="请选择演练预案" clearable :style="{ width: '100%' }">
                            <el-option v-for="(item, index) in planList" :key="index" :label="item.reservePlan"
                                :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="演练时间" prop="planTime">
                        <el-date-picker v-model="formData.planTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }" placeholder="请选择演练时间" clearable></el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="演练地点" prop="place">
                        <el-input v-model="formData.place" placeholder="请输入演练地点" clearable :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="演练负责人" prop="leaderId">
                        <UserDialog :disabled="$route.query.isInfo || isInfo" v-model="formData.leaderId"
                            @change="changeUserhostId"></UserDialog>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="参加人员" prop="joinUserId">
                        <UserDialogSelection :disabled="$route.query.isInfo || isInfo || $route.query.isEdit"
                            @change="changeUser" placeholder="请选择参加人员" v-model="formData.joinUserId"></UserDialogSelection>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="记录日期" prop="recordTime">
                        <el-date-picker v-model="formData.recordTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }" placeholder="请选择演练时间" clearable></el-date-picker>
                    </el-form-item>
                </el-col>

            </el-row>
            <!-- <el-col :span="8"> -->
            <el-form-item label="所用物资材料情况" prop="useMaterial">
                <el-input v-model="formData.useMaterial" placeholder="请输入所用物资材料情况" clearable type="textarea"
                    :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <!-- </el-col> -->
            <el-form-item label="演练内容" prop="drillContent">
                <el-input v-model="formData.drillContent" type="textarea" placeholder="请输入演练内容"
                    :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
            </el-form-item>
            <el-form-item label="签到附件" prop="signUrl">
                <FileUpload v-model="formData.signUrl"></FileUpload>
            </el-form-item>
            <el-col :span="24" v-if="btnShow">
                <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
                    <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm">提交</el-button>
                    <el-button :disabled="false" @click="resetForm">返回</el-button>
                </el-form-item>
            </el-col>
        </el-form>
    </div>
</template>
  
<script>
import { deptTreeSelect } from "@/api/system/user";

import {
    listSelect,
    safeAccidentDrillItemRecordAdd,
    safeAccidentDrillItemRecordEdit,
    safeAccidentDrillItemRecordInfo,
} from "@/api/secure/recordDrill.js";
// import { selectList as selectListplan } from "@/api/quality/manageAudit/plan.js";
export default {
    components: {},
    props: {
        isInfo: {
            type: Boolean,
            default: false,
        },
        id: {
            type: String,
            default: "",
        },
        btnShow: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            planList: [],
            formData: {
                place: undefined,
                deptId: undefined,
                planTime: null,
                finishDate: null,
                checkUserId: undefined,
                result: undefined,
                remark: undefined,
                reservePlan: undefined,
            },
            year: '',
            reservePlan: '',
            deptOptions: [],
            deptIdShow: false,
            rules: {
                reservePlan: [
                    {
                        required: true,
                        message: "请选择演练预案",
                        trigger: "change",
                    },
                ],
                place: [
                    {
                        required: true,
                        message: "请输入演练地点",
                        trigger: "blur",
                    },
                ],
                deptId: [
                    {
                        required: true,
                        message: "请选择责任部门",
                        trigger: "change",
                    },
                ],
                planTime: [
                    {
                        required: true,
                        message: "请选择演练时间",
                        trigger: "change",
                    },
                ],
                finishDate: [
                    {
                        required: true,
                        message: "请选择完成日期",
                        trigger: "change",
                    },
                ],
                checkUserId: [
                    {
                        required: true,
                        message: "请选择验证人",
                        trigger: "blur",
                    },
                ],
                result: [
                    {
                        required: false,
                        message: "请输入验证结果及完成时间",
                        trigger: "blur",
                    },
                ],
                remark: [
                    {
                        required: false,
                        message: "请输入备注",
                        trigger: "blur",
                    },
                ],
            },
            deptName: '',
            deptId: ''
        };
    },
    computed: {},
    watch: {},
    created() {
        this.getDeptTree();


        // this.getPlan();
    },
    mounted() { },
    methods: {
        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then((response) => {
                this.deptOptions = response.data;
                if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
                    this.getinfo();
                }
            });
        },
        changeYear(e) {
            console.log(e);
            listSelect({ year: e }).then((response) => {
                this.planList = response.data;
            })
        },
        changeReservePlan(e) {
            console.log(e);
            this.formData = e
            this.$set(this.formData, 'leaderId', e.leaderId)
            this.$set(this.formData, 'leaderName', e.leaderName)

            this.$set(this.formData, 'joinUserId', e.joinUserId.split(',').map(Number))
            this.$set(this.formData, 'joinUserName', e.joinUserName.split(','))
            this.$set(this.formData, 'useMaterial', e.prepareWork)

            // this.formData.useMaterial = e.prepareWork
            this.formData.planTime = this.formData.planTime + '-01'
            console.log(this.formData);
            this.$forceUpdate()
        },
        changeUser(e) {
            console.log(e);
            let idList = []
            let nameList = []
            e.forEach((i) => {
                idList.push(i.userId)
                nameList.push(i.nickName)
            });
            console.log(idList, 'idList');
            this.formData.joinUserId = idList.toString()
            this.formData.joinUserName = nameList.toString()
        },
        changeCascader(e) {
            console.log(this.$refs.reference.getCheckedNodes());
            let arr = this.$refs.reference.getCheckedNodes()
            let list = []
            let label = []
            arr.forEach((item, index) => {
                list.push(item.value)
                label.push(item.label)
                console.log(item.value);
            })
            console.log(list);
            this.deptIdStringValue = list.toString()
            this.deptIdStringLabel = label.toString()
            console.log(this.deptIdStringValue, this.deptIdStringLabel);
            this.deptIdShow = true

        },
        visibleChange(e) {
        },
        changeUserhostId(e) { 
            console.log(e);
            this.formData.leaderName = e.nickName
        },
        getinfo() {
            safeAccidentDrillItemRecordInfo(this.$route.query.id || this.id).then((response) => {
                this.formData = response.data;
                this.reservePlan = this.formData.reservePlan
            });
        },
        submitForm() {
            this.$refs["elForm"].validate((valid) => {
                if (valid) {
                    let query = JSON.parse(JSON.stringify(this.formData));
                    if (this.deptIdShow) {
                        query.deptId = this.deptIdStringValue
                        query.deptName = this.deptIdStringLabel
                    } else {
                        query.deptId = this.deptId
                        query.deptName = this.deptName
                    }

                    query.joinUserId = query.joinUserId.toString()
                    query.joinUserName = query.joinUserName.toString()
                    // query.planTime = query.planTime + '-01'
                    if (this.formData.safeAccidentDrillItemRecordId != undefined) {
                        safeAccidentDrillItemRecordEdit(query).then((response) => {
                            this.$modal.msgSuccess("修改成功");
                            this.resetForm();
                        });
                    } else {
                        safeAccidentDrillItemRecordAdd(query).then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            this.resetForm();
                        });
                    }
                }
            });
        },
        resetForm() {
            this.$tab.closeOpenPage();
        },
    },
};
</script>
  